<template>
  <van-sticky v-slide-plus :offset-top="108">
    <van-tabs
      v-model:active="queryParams.typeId"
      animated
      color="#4580dd"
      @change="handleSearch"
    >
      <van-tab v-for="(i, k) in typeList" :key="k" :title="i.name" :name="i.id" />
    </van-tabs>
  </van-sticky>
  <div class="mobile-ecology-2">
    <Title title="我们的硬件生态" color="#0e0b31" bold="700" />
    <div class="query-search f f-ac">
      <el-input
        v-model="queryParams.name"
        placeholder="搜索"
        maxlength="20"
        clearable
        @keyup.enter.prevent="handleSearch"
      />
      <el-icon size="20" color="#c4c4c4" @click="handleSearch">
        <IEpSearch />
      </el-icon>
    </div>
    <div class="ecology-list">
      <div
        v-slide-plus
        v-for="(item, k) in dataList"
        :key="k"
        class="ecology-item"
        @click="handleDetail(item)"
      >
        <div class="ecology-top">
          <div class="ecology-img">
            <img v-slide-plus :src="publicSrc(item.cover)" />
          </div>
          <Title
            v-slide-up
            :title="item.name"
            color="#fff"
            size="20"
            bold="700"
            line="1"
            :sub-title="item.model"
            sub-size="14"
            sub-color="#fff"
            sub-line="1"
          />
        </div>
        <div v-slide-up class="ecology-bottom f f-ac f-jb">
          <Title title="查看详情" color="#0e0b31" size="16" bold="700" />
          <el-icon size="20" color="#409eff">
            <IEpRight />
          </el-icon>
        </div>
      </div>
    </div>
    <Pagination
      v-slide-up
      v-model:page-num="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :total="total"
      :pager-count="3"
      justify="center"
      layout="prev, pager, next, total"
      @change="getList"
    />
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { productTypeList, productList } from "@/api/ecology";
const router = useRouter();

const queryParams = reactive({
  name: "", // 产品名称
  pageNum: 1, // 当前页
  pageSize: 10, // 每页条数
  typeId: "", // 类型
  status: 0, // 0显示 1隐藏
});
const typeList = ref<any>([]); // 类型列表
const total = ref<number>(0); // 总条数
const dataList = ref<any>([]); // 列表数据

onMounted(() => {
  getTypeList();
});

// 获取产品类型列表
const getTypeList = () => {
  productTypeList().then((res: any) => {
    if (res.code == 200) {
      typeList.value = res.rows;
      if (typeList.value.length > 0) {
        queryParams.typeId = typeList.value[0].id;
        getList();
      }
    }
  });
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  getList();
};

// 获取列表
const getList = () => {
  productList(queryParams).then((res: any) => {
    if (res.code === 200) {
      let list = res.rows.map((item: any) => {
        return {
          ...item,
          cover: item.image ? item.image.split(",")[0] : "",
        };
      });
      dataList.value = list;
      total.value = res.total;
    }
  });
};

// 查看详情
const handleDetail = (item: any) => {
  router.push({ path: "/m/ecology/detail", query: { id: item.id } });
};
</script>
<style lang="scss" scoped>
.mobile-ecology-2 {
  width: 100%;
  background-color: #f9f9f9;
  padding: 1.25rem;
  box-sizing: border-box;
  .query-search {
    margin-top: 1.25rem;
    height: 2.5rem;
    background-color: #ececee;
    .el-input {
      height: 100%;
      background-color: transparent;
      box-shadow: none;
      border: none;
      outline: none;
    }
    .el-icon {
      width: 3.125rem;
      font-size: 1.875rem;
    }
  }
  .ecology-list {
    margin-top: 1.25rem;
    .ecology-item {
      width: 100%;
      height: 27.5rem;
      box-shadow: 0 0 0.625rem 0 rgba(94, 94, 94, 0.1);
      transition: all 0.3s;
      margin-bottom: 1.25rem;
      .ecology-top {
        width: 100%;
        height: 23rem;
        background: linear-gradient(
          180deg,
          rgba(15, 11, 51, 0.2) 0%,
          rgba(15, 11, 51, 0.81) 100%
        );
        .ecology-img {
          width: 100%;
          height: 17.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            max-width: 14.375rem;
            max-height: 14.375rem;
          }
        }
      }
      .ecology-bottom {
        height: 4.5rem;
        padding: 0 1.875rem;
        box-sizing: border-box;
        background-color: #fff;
        .el-icon {
          border-radius: 50%;
          padding: 0.25rem;
          color: #fff;
          background-color: #447fdb;
        }
      }
    }
  }
}

:deep(.el-input__wrapper) {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
</style>
